<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "添加分类信息和位置信息"
  }
}
</route>

<script lang="ts" setup>
import type { Icon } from '@/api/common'
import { getIconList } from '@/api/common'

const emit = defineEmits(['closeDialog'])

const initialData = undefined

const { loading, error, data, run } = useRequest<Icon[]>(() => getIconList(), {
  immediate: true,
  initialData,
})
const form = reactive({
  name: '',
  location: '',
  fileList: [],
  note: '',
  category: '',
})
const fileList = ref<any[]>([
  {
    url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg',
  },
])

const action: string = 'https://ukw0y1.laf.run/upload'
const columns = ref(['卧室衣柜', '书房抽屉', '玄关鞋柜'])
const categoryColumns = ref(['证件', '衣物', '鞋包'])

function handCancel() {
  emit('closeDialog')
}
function handSave() {
  console.log('🚀 ~ handSave ~ form:', form)
  emit('closeDialog')
}
console.log(data, 'data')
</script>

<template>
  <view class="h-full flex flex-col bg-white">
    <view class="sticky top-0 z-10 flex items-center justify-between border-b border-slate-200 bg-white/80 p-4 backdrop-blur-sm">
      <view class="text-slate-600 font-bold">
        取消
      </view>
      <view class="text-lg text-slate-800 font-bold">
        添加新分类
      </view>
      <view class="text-lg text-sky-500 font-bold">
        保存
      </view>
    </view>

    <view class="flex-grow overflow-y-auto p-4 space-y-6">
      <view>
        <label class="mb-2 block text-slate-600 font-semibold">1. 选择一个图标</label>
        <view class="flex flex-wrap justify-between gap-2 rounded-xl bg-slate-100 p-3">
          <!-- Icon Picker Grid -->
          <fg-virtual-list
            :data="data || []"
            :item-height="100"
            :list-height="600"
            :item-min-width="80"
            item-key="name"
          >
            <template #default="{ item }">
              <view class="aspect-square w-16 flex flex-col items-center justify-center rounded-lg bg-white text-2xl text-slate-500">
                <view class="fa" :class="item.class" />
                <wd-text :text="item.name" class="font-size-2 line-height-normal">
                  {{ item.name }}
                </wd-text>
              </view>
            </template>
          </fg-virtual-list>
        </view>
      </view>

      <view>
        <label class="mb-2 block text-slate-600 font-semibold">2. 填写分类名称</label>
        <input type="text" placeholder="例如：冬季衣物" class="w-full border border-slate-300 rounded-lg bg-slate-50 px-4 py-3 transition focus:outline-none focus:ring-2 focus:ring-sky-500">
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
</style>
